import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:wallet_utils/color.dart';
import 'package:wallet_utils/el_refresh.dart';
import 'package:wallet_utils/report_widget/click_widget.dart';
import 'package:wallet_utils/text_style.dart';
import 'package:wallet_utils/webview_common.dart';
import '../../login_page/constant.dart';
import 'logic.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:wallet_utils/ht_common_widgets.dart';

class ProductPage extends StatefulWidget {
  @override
  State<ProductPage> createState() => _ProductPageState();
}

class _ProductPageState extends State<ProductPage> with AutomaticKeepAliveClientMixin {
  final logic = Get.put(ProductPageLogic());
  final state = Get
      .find<ProductPageLogic>()
      .state;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: ColorManager.colorF4F5F6,
        appBar: AppBar(
          elevation: 0,
          toolbarHeight: 60.w,
          leadingWidth: 0,
          leading: const SizedBox(),
          title: Container(
            margin: EdgeInsets.only(left: 1.w, top: 8.w),
            child: Text(
              '放鑫钱包 | 极速贷',
              style: TextStyleUtils.style000000(fontSize: 22.sp, fontWeight: FontWeight.bold),
            ),
          ),
        ),
        body: elRefresh(
          height: 50.w,
          refreshController: state.refreshController,
          enablePullUp: false,
          onRefresh: () async {
            logic.obtainProductInfoV2();
          },
          child: GetBuilder<ProductPageLogic>(builder: (logic) {
            return Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Container(
                  color: ColorManager.colorF4F5F6,
                  padding: EdgeInsets.only(left: 16.w, right: 16.w, top: 10.w),
                  child: Container(
                    height: 220.w,
                    color: ColorManager.colorFFFFFF,
                    padding: EdgeInsets.only(left: 10.w, right: 10.w, bottom: 5.w),
                    child: Column(
                      children: [
                        Container(
                          margin: EdgeInsets.only(top: 20.w, bottom: 12.w),
                          child: Row(
                            children: [
                              Text(
                                '优选产品',
                                style: TextStyleUtils.style000000(fontSize: 18.sp, fontWeight: FontWeight.bold),
                              ),
                              SizedBox(
                                width: 10.w,
                              ),
                              Text(
                                '安全合规 快速到账',
                                style: TextStyleUtils.style999999(fontSize: 13.sp),
                              ),
                            ],
                          ),
                        ),
                        Stack(
                          children: [
                            Image.asset(
                              'images/pro_header.png',
                              fit: BoxFit.cover,
                            ),
                            Container(
                              margin: EdgeInsets.only(top: 18.w, left: 15.w),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Container(
                                      margin: EdgeInsets.only(left: 5.w, bottom: 10.w),
                                      child: Text(
                                        '最高可借(元)',
                                        style: TextStyleUtils.style989796(fontSize: 14.sp),
                                      )),
                                  Row(
                                    children: [
                                      Expanded(
                                        child: Text(
                                          state.loanAmount ?? '',
                                          style: TextStyleUtils.styleE7A159(fontSize: 36.sp, fontWeight: FontWeight.bold),
                                        ),
                                      ),
                                      ClickWidget(
                                        onTap: () {
                                          logic.popover(1,0);
                                        },
                                        child: Container(
                                          width: 115.w,
                                          height: 35.w,
                                          alignment: const Alignment(0, 0),
                                          margin: EdgeInsets.only(
                                            right: 15.w,
                                          ),
                                          decoration: BoxDecoration(
                                            color: ColorManager.colorE3B07F,
                                            //设置四周圆角 角度 这里的角度应该为 父Container height 的一半
                                            borderRadius: BorderRadius.all(Radius.circular(25.0)),
                                          ),
                                          child: Text(
                                            '领取我的额度',
                                            style: TextStyleUtils.styleFFFFFF(fontSize: 14.sp, fontWeight: FontWeight.bold),
                                          ),
                                        ),
                                      ),
                                    ],
                                  ),
                                  Container(
                                    margin: EdgeInsets.only(top: 2.w),
                                    child: Text(
                                      '年利率${(state.loanMinRate?.toInt())}%',
                                      style: TextStyleUtils.styleA67A58(fontSize: 12.sp),
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),
                  ),
                ),
                Container(
                  height: 65.w,
                  color: ColorManager.colorF4F5F6,
                  alignment: Alignment.centerLeft,
                  padding: EdgeInsets.only(left: 16.w),
                  child: Text(
                    '热门产品',
                    style: TextStyleUtils.style000000(fontSize: 18.sp, fontWeight: FontWeight.bold),
                  ),
                ),
                MediaQuery.removePadding(
                    context: context,
                    removeTop: true,
                    child: Container(
                      color: ColorManager.colorF4F5F6,
                      child: ListView.builder(
                        shrinkWrap: true,
                        itemCount: logic.productList!.isNotEmpty ? logic.productList!.length - 1 : 0,
                        physics: const NeverScrollableScrollPhysics(),
                        itemBuilder: ((context, index) {
                          return productItem(index);
                        }),

                      ),
                    )),
              ],
            );
          }),
        ));
  }

  Container productItem(int index) {
    return Container(
        height: 100.w,
        margin: EdgeInsets.only(left: 16.w, bottom: 16.w, right: 16.w),
        decoration: BoxDecoration(
          color: ColorManager.colorFFFFFF,
          //设置四周圆角 角度 这里的角度应该为 父Container height 的一半
          borderRadius: BorderRadius.all(Radius.circular(5.0)),
        ),
        child: Container(
          margin: EdgeInsets.only(top: 15.w, left: 14.w),
          child: Column(
      children: [
        Row(
          children: [
            HtImage(icon: true,
                url: logic.productList![index].logo,
                width: 18.w,
                height: 18.w,
                radius: 2),
            SizedBox(
              width: 5.w,
            ),
            Text(
              logic.productList![index].productName ?? '',
              style: TextStyleUtils.style000000(fontSize: 14.sp, fontWeight: FontWeight.bold),
            )
          ],
        ),
        SizedBox(
          height: 12.w,
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  logic.productList![index].loanAmount ?? '',
                  style: TextStyleUtils.styleF73326(
                    fontSize: 18.sp,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                Text(
                  '最高额度(元)',
                  style: TextStyleUtils.style999999(fontSize: 12.sp),
                )
              ],
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  '${(logic.productList![index].loanMinRate?.toInt())}%起',
                  style: TextStyleUtils.style000000(
                    fontSize: 18.sp,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                Text(
                  '年利率(单利)',
                  style: TextStyleUtils.style999999(fontSize: 12.sp),
                )
              ],
            ),
            ClickWidget(
              onTap: () {
                logic.popover(2,index);
              },
              child: Container(
                height: 35.w,
                padding: EdgeInsets.only(left: 19.w, right: 19.w),
                alignment: const Alignment(0, 0),
                margin: EdgeInsets.only(
                  right: 15.w,
                ),
                decoration: BoxDecoration(
                  color: ColorManager.colorD93C3A,
                  //设置四周圆角 角度 这里的角度应该为 父Container height 的一半
                  borderRadius: BorderRadius.all(Radius.circular(25.0)),
                ),
                child: Text(
                  '去申请',
                  style: TextStyleUtils.styleFFFFFF(fontSize: 14.sp, fontWeight: FontWeight.bold),
                ),
              ),
            ),
          ],
        ),
      ],

          ),
        ));
  }

  @override
  bool get wantKeepAlive => true;
}
